<style scoped>
    ul{
        list-style: none;
    }
</style>
<template>
    <div style="margin: 20px;">
        <!-- 河道信息关联搜索 -->
        <div>
            <Row style="margin-bottom: 25px;">
                <Col span="8" :xs="24" :lg="8">
                    河道名称：
                    <Input v-model="riverName" placeholder="请输入河道相关的关键词进行搜索" style="width:200px"></Input>
                </Col>
                <Col span="8" :xs="24" :lg="8"><Button type="primary" shape="circle" icon="ios-search" @click="search()">搜索</Button></Col>
            </Row>
        </div>      
        <!-- 河道具体信息展示及CRUD操作 -->      
        <div>
            <ul>
                <li>
                    <Button type="primary" icon="plus-round" @click="openNewModal()">新增河道</Button>
                    <Button type="success" icon="wrench" @click="openModifyModal()">修改河道</Button>
                    <Button type="error" icon="trash-a" @click="del()">删除河道</Button>
                </li>
                <li>
                    <div style="padding: 10px 0;">
                        <Table border :columns="columns1" :data="data1" :height="300" @on-selection-change="s=>{change(s)}" @on-row-dblclick="s=>{dblclick(s)}"></Table>
                    </div> 
                </li>
                <li>
                    <div style="text-align: right;">
                        <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total @on-change="e=>{pageSearch(e)}"></Page>
                    </div>  
                </li>
            </ul>
        </div>
        <!--添加 river modal-->  
        <Modal :mask-closable="false" :visible.sync="newModal" :loading = "loading" v-model="newModal" width="600" title="新建" @on-ok="newOk('riverNew')" @on-cancel="cancel()">
            <Form ref="riverNew" :model="riverNew" :rules="riverNewRule" :label-width="80" >
                <Row>
                    <Col span="12">
                        <Form-item label="河道编号:" prop="river_id">
                            <Input v-model="riverNew.river_id" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="河道名称:" prop="river_name">
                            <Input v-model="riverNew.river_name" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="温度阈值:" prop="temp_std">
                            <Input v-model="riverNew.temp_std"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="水位高度阈值:" prop="height_std">
                            <Input v-model="riverNew.height_std"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="ph值阈值:" prop="ph_std">
                            <Input v-model="riverNew.ph_std"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="河流浊度阈值:" prop="turbidity_std">
                            <Input v-model="riverNew.turbidity_std"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="北纬:" prop="nl">
                            <Input v-model="riverNew.nl"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="东经:" prop="el">
                            <Input v-model="riverNew.el"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
        <!--修改 river modal-->  
        <Modal :mask-closable="false" :visible.sync="modifyModal" :loading = "loading" v-model="modifyModal" width="600" title="修改" @on-ok="modifyOk('riverModify')" @on-cancel="cancel()">
            <Form ref="riverModify" :model="riverModify" :rules="riverModifyRule" :label-width="80" >
                <Row>
                    <Col span="12">
                        <Form-item label="河道名称:" prop="river_name">
                            <Input v-model="riverModify.river_name" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="温度阈值:" prop="temp_std">
                            <Input v-model="riverModify.temp_std"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="水位高度阈值:" prop="height_std">
                            <Input v-model="riverModify.height_std"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="ph值阈值:" prop="ph_std">
                            <Input v-model="riverModify.ph_std"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="河流浊度阈值:" prop="turbidity_std">
                            <Input v-model="riverModify.turbidity_std"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="北纬:" prop="nl">
                            <Input v-model="riverModify.nl"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="东经:" prop="el">
                            <Input v-model="riverModify.el"  style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                /*用于查找的河流名称*/
                riverName: null,
                /*选择的数量*/
                count:null,
                /*选中的组数据*/
                groupId:null,
                /*新建modal的显示参数*/
                newModal:false,
                /*修改modal的显示参数*/
                modifyModal:false,
                /*权限modal的显示参数*/
                settingModal:false,
                /*分页total属性绑定值*/
                total:0,
                /*loading*/
                loading: true,
                /*pageInfo实体*/
                pageInfo:{
                    page:0,
                    pageSize:10
                },
                /*river实体*/
                river:{                             
                    river_id: null,
                    river_name: null,
                    temp_std: null,
                    height_std: null,
                    ph_std: null,
                    turbidity_std: null,
                    nl: null,
                    el: null
                },
                /*用于添加的river实体*/
                riverNew:{
                    river_id: null,
                    river_name: null,
                    temp_std: null,
                    height_std: null,
                    ph_std: null,
                    turbidity_std: null,
                    nl: null,
                    el: null
                },
                /*用于修改的river实体*/
                riverModify:{
                    river_id: null,
                    river_name: null,
                    temp_std: null,
                    height_std: null,
                    height_std: null,
                    ph_std: null,
                    turbidity_std: null,
                    nl: null,
                    el: null
                },
                /*新建验证*/
                riverNewRule:{
                    river_id: [
                        { type:'string',required: true, message: '请输入河道编号', trigger: 'blur' }
                    ],
                    river_name: [
                        { type:'string',required: true, message: '请输入河道名称', trigger: 'blur' }
                    ],
                    temp_std: [
                        { type:'string',required: true, message: '请输入河道水温阈值', trigger: 'blur' }
                    ],
                    height_std: [
                        { type:'string',required: true, message: '请输入河道水位高度阈值', trigger: 'blur' }
                    ],
                    ph_std: [
                        { type:'string',required: true, message: '请输入河道ph值阈值', trigger: 'blur' }
                    ],
                    turbidity_std: [
                        { type:'string',required: true, message: '请输入河道浊度阈值', trigger: 'blur' }
                    ],
                    nl: [
                        { type:'string',required: true, message: '请输入河道坐标北纬', trigger: 'blur' }
                    ],
                    el: [
                        { type:'string',required: true, message: '请输入河道坐标东经', trigger: 'blur' }
                    ]
                },
                /*修改验证*/
                riverModifyRule:{
                    river_id: [
                        { type:'string',required: true, message: '请输入河道编号', trigger: 'blur' }
                    ],
                    river_name: [
                        { type:'string',required: true, message: '请输入河道名称', trigger: 'blur' }
                    ],
                    temp_std: [
                        { type:'string',required: true, message: '请输入河道水温阈值', trigger: 'blur' }
                    ],
                    height_std: [
                        { type:'string',required: true, message: '请输入河道水位高度阈值', trigger: 'blur' }
                    ],
                    ph_std: [
                        { type:'string',required: true, message: '请输入河道ph值阈值', trigger: 'blur' }
                    ],
                    turbidity_std: [
                        { type:'string',required: true, message: '请输入河道浊度阈值', trigger: 'blur' }
                    ],
                    nl: [
                        { type:'string',required: true, message: '请输入河道坐标北纬', trigger: 'blur' }
                    ],
                    el: [
                        { type:'string',required: true, message: '请输入河道坐标东经', trigger: 'blur' }
                    ]
                },
                /*表显示字段*/
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '河道编号',
                        width: 140,
                        key: 'river_id'
                    },
                    {
                        title: '河道名称',
                        width: 200,
                        key: 'river_name'
                    },
                    {
                        title: '温度阈值',
                        key: 'temp_std'
                    },
                    {
                        title: '水位高度阈值',
                        key: 'height_std'
                    },
                    {
                        title: 'ph值阈值',
                        key: 'ph_std'
                    },
                    {
                        title: '河流浊度阈值',
                        key: 'turbidity_std'
                    },
                    {
                        title: '北纬',
                        key: 'nl'
                    },
                    {
                        title: '东经',
                        key: 'el'
                    },
                    {   title: '操作', 
                        key: 'action', 
                        width: 150, 
                        align: 'center', 
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                    },
                                    on: {
                                        click: () => {
                                            this.relationSet(params.row);
                                        }
                                    }
                                },'配置河道河长')
                            ]);
                        } 
                    }
                ],
                /*表数据*/
                data1: []
                
            }
        },
        mounted(){
            /*页面初始化调用方法*/
            this.getTable({
                "pageInfo":this.pageInfo,
                "riverName":this.riverName
            });
        },
        methods: {
            /* 全局notice触发事件 */
            info (nodesc) {
                this.$Notice.info({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
            /*pageInfo实体初始化*/
            initPageInfo(){
                this.pageInfo.page = 0;
                this.pageInfo.pageSize = 10;
            },
            /*river实体初始化*/
            initRiver(){
                this.river.river_id = null;
                this.river.river_name = null;
                this.river.temp_std = null;
                this.river.height_std = null;
                this.river.ph_std = null;
                this.river.turbidity_std = null;
                this.river.el = null;
                this.river.nl = null;
            },
            /*riverNew实体初始化*/
            initRiverNew(){
                this.riverNew.river_id = null;
                this.riverNew.river_name = null;
                this.riverNew.temp_std = null;
                this.riverNew.height_std = null;
                this.riverNew.ph_std = null;
                this.riverNew.turbidity_std = null;
                this.riverNew.el = null;
                this.riverNew.nl = null;
            },
            /*riverModify实体初始化*/
            initRiverModify(){
                this.riverModify.river_id = null;
                this.riverModify.river_name = null;
                this.riverModify.temp_std = null;
                this.riverModify.height_std = null;
                this.riverModify.ph_std = null;
                this.riverModify.turbidity_std = null;
                this.riverModify.el = null;
                this.riverModify.nl = null;
            },
            /*river设置*/
            riverSet(e) {
                this.river.river_id = e.river_id;
                this.river.river_name = e.river_name;
                this.river.temp_std = e.temp_std;
                this.river.height_std = e.height_std;
                this.river.ph_std = e.ph_std;
                this.river.turbidity_std = e.turbidity_std;
                this.river.el = e.nl;
                this.river.nl = e.el;
            },
            /*riverNew设置 */
            riverNewSet(e) {
                this.riverNew.river_id = e.river_id;
                this.riverNew.river_name = e.river_name;
                this.riverNew.temp_std = e.temp_std;
                this.riverNew.height_std = e.height_std;
                this.riverNew.ph_std = e.ph_std;
                this.riverNew.turbidity_std = e.turbidity_std;
                this.riverNew.el = e.nl;
                this.riverNew.nl = e.el;
            },
            /*riverModify设置 */
            riverModifySet(e) {
                this.riverModify.river_id = e.river_id;
                this.riverModify.river_name = e.river_name;
                this.riverModify.temp_std = e.temp_std;
                this.riverModify.height_std = e.height_std;
                this.riverModify.ph_std = e.ph_std;
                this.riverModify.turbidity_std = e.turbidity_std;
                this.riverModify.el = e.nl;
                this.riverModify.nl = e.el;
            },
            /*得到表数据*/
            getTable(e) {
                this.axios({
                  method: 'get',
                  url: '/rivers',
                  params: {
                    'page':e.pageInfo.page,
                    'pageSize':e.pageInfo.pageSize
                  }
                }).then(function (response) {
                    this.data1=response.data.data;
                    this.total=response.data.totalCount;
                }.bind(this)).catch(function (error) {
                  alert(error);
                });
            },
            /*搜索按钮点击事件*/
            search(){
                this.initPageInfo();
                this.getTable({
                    "pageInfo":this.pageInfo,
                    "loginName":this.loginName
                });   
            },
            /*分页点击事件*/
            pageSearch(e){
                this.pageInfo.page = e-1;
                this.getTable({  
                    "pageInfo":this.pageInfo
                });
            },
            /*新建点击触发事件*/
            openNewModal(){
                this.newModal = true;
                this.initRiverNew();
                this.data1.sort();
                this.count = 0;
                this.groupId = null;
            },
            /*新建modal的newOk点击事件*/
            newOk (riverNew) { 
                this.$refs[riverNew].validate((valid) => {
                    if (valid) {
                        this.initRiverNew();
                        this.riverNewSet(this.riverNew);
                        this.axios({
                            method: 'post',
                            url: '/rivers/addriver',
                            data: this.riverNew
                        }).then(function (response) {
                            this.initRiverNew();
                            this.getTable({
                                "pageInfo": this.pageInfo,
                                "loginName": this.loginName
                            });
                            this.$Message.info('添加河道成功');
                        }.bind(this)).catch (
                            function (error) {
                                alert(error);
                            });
                        this.newModal = false;
                    } else {
                        this.$Message.error('表单验证失败!');
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            /*点击修改时判断是否只选择一个*/
            openModifyModal(){
                if(this.count > 1 || this.count < 1){
                    this.modifyModal= false; 
                    this.$Message.warning('请至少选择一项(且只能选择一项)');  
                }else{
                    this.modifyModal = true;
                }
            },
           /*修改modal的modifyOk点击事件*/
             modifyOk (riverModify) { 
                this.$refs[riverModify].validate((valid) => {
                    if (valid) {
                        this.initRiver();
                        this.riverSet(this.riverModify);
                        this.axios({
                          method: 'put',
                          url: '/rivers/'+this.river.river_id,
                          data: this.river
                        }).then(function (response) {
                            this.initRiverNew();
                            this.getTable({
                                "pageInfo":this.pageInfo,
                                "loginName":this.loginName
                            });
                            this.$Message.info('修改河道信息成功！');
                        }.bind(this)).catch(function (error) {
                          alert(error);
                        });  
                        this.modifyModal = false;
                    }else {
                        this.$Message.error('表单验证失败！');
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            /*删除table中选中的数据*/
            del(){
                if(this.groupId!=null && this.groupId!=""){
                    this.axios({
                      method: 'delete',
                      url: '/rivers',
                      data: this.groupId
                    }).then(function (response) {
                        this.getTable({
                            "pageInfo":this.pageInfo,
                            "loginName":this.loginName
                        });
                        this.groupId=null;
                        this.count=0;
                        this.$Message.info('删除成功！');
                    }.bind(this)).catch(function (error) {
                        alert(error);
                    });
                } else {
                    this.$Message.warning('请至少选择一项！')
                }
            },
            /*modal的cancel点击事件*/
            cancel () {
                this.$Message.info('取消当前操作！');
            },
            /*table选择后触发事件*/
            change(e){
                if(e.length==1){
                    this.riverModifySet(e['0']);
                }
                this.setGroupId(e);              
            },
            /*通过选中的行设置groupId的值*/
            setGroupId(e){
                this.groupId=[];
                this.count=e.length;
                for (var i = 0; i <= e.length - 1; i++) {
                    this.groupId.push(e[i].river_id);
                }
            },
            /*表格中双击事件*/
            dblclick(e){
                this.riverModifySet(e);
                this.modifyModal = true;
                this.data1.sort();
            },


        }

    };
</script>